<template>
<div class="shop flex-column">
    <div class="header flex-center-space-between">
        <div></div>
        <van-button type="danger" size="mini" style="width: 70px" round plain @click="edit = !edit">{{ edit ? '完成' : '编辑' }}</van-button>
    </div>
    <div class="shop-box overflow-y">
        <div class="item flex-center-space-between" v-for="(item, index) in list" :key="index">
            <div class="checkbox flex-center-end" v-show="edit">
                <van-checkbox v-model="item.select" checked-color="#ee0a24"></van-checkbox>
            </div>
            <div class="shop-box-data flex-1 flex-center">
                <img src="" alt="">
                <div class="msg flex-1 flex-column-space-between text-left">
                    <div class="font-size-16 blod name">
                        山海特服欧智能有限公司
                    </div>
                    <div class="tag">
                        <van-tag :type="typeMode(item.type)[0]" class="tag-" plain>{{ typeMode(item.type)[1] }}</van-tag>
                        <span class="text-gray">经营品牌：SFk</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer flex-center-space-between" v-show="edit">
        <van-checkbox :value="allCheck" checked-color="#ee0a24" @click="allChange">全选</van-checkbox>
        <van-button type="danger" size="small" round @click="del">取消收藏</van-button>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            list: [
                { tit: '山海特服欧智能有限公司', brand: 'SKF', type: 0 },
                { tit: '山海特服欧智能有限公司', brand: 'SKF', type: 1 },
                { tit: '山海特服欧智能有限公司', brand: 'SKF', type: 2 },
                { tit: '山海特服欧智能有限公司', brand: 'SKF', type: 3 }
            ],
            edit: true
        }
    },
    computed: {
        allCheck () {
            return this.list.every(v => v.select)
        }
    },
    methods: {
        allChange () {
            const isCheck = !this.allCheck
            this.list.forEach((val, i) => {
                this.$set(this.list[i], 'select', isCheck)
            })
        },
        del () {
            const list = this.list.filter(v => !v.select )
            this.list = list
        },

        typeMode (v) {
            switch (v) {
                case 0:
                    return ['danger', '渠道商']
                case 1:
                    return ['primary', '经销商']
                case 2:
                    return ['success', '生产厂家']
                case 3:
                    return ['primary', '自营']
            }
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    height: 50px;
    padding: 0 20px;
}

.item {
    height: 90px;
    background-color: #fff;
    .checkbox {
        width: 40px
    }
    .shop-box-data {
        padding-left: 20px;
        img {
            height: 60px;
            min-width: 60px;
            width: 60px;
        }
        .msg {
            height: 56px;
            padding-left: 10px;
            .name {
                margin-bottom: 10px;
            }
        }
    }
    .tag- {
        border-radius: 4px;
        margin-right: 10px;
    }
}

.footer {
    height: 50px;
    padding: 0 20px;
    background-color: #fff;
}
</style>
